セクション区切りを可視化する 2

https://gyazo.com/e35b8c8ba2482a0e992b0343df12896a

左のオレンジの丸がセクション番号になってます。

https://gyazo.com/d1c3bae42a81822c0781b27af8410601

セクション番号がわかって嬉しい場合ってどんなんよ？ と思わんでもないけど、

プレゼン用のページだったりとか、用語集だったりとか、セクション数字が増えていくと

「がんばったな～」とか「そろそろページを分けたいな」とか考えたりします。それもまたScrapbox。

code:style.css

/* セクション区切りを可視化する (番号) */

.app { counter-reset: section }

.app:not(.presentation) .line.section-title:not(.line-title) { position: relative }

.app:not(.presentation) .line.section-title:not(.line-title):after {

counter-increment: section;

content: counter(section);

display: inline-block; width: 1.6em; height: 1.6em;

position: absolute; top: 5%; left: -5vw;

text-align: center; white-space: nowrap }